<!-- filepath: d:\ServiceTrial\Teaching\src\views\Home.vue -->
<template>
  <div class="container">
    <!-- 右侧步骤面板 -->
    <div class="right-panel">
      <div class="step-container" v-if="currentStep === 1">
        <h1>教学设置</h1>
        <div class="form-row">
          <div>
            <label>教育阶段</label>
            <select v-model="educationLevel" @change="updateSubjects">
              <option value="">请选择</option>
              <option value="primary">初等教育</option>
              <option value="middle">中等教育</option>
            </select>
          </div>
        </div>
        <div class="subject-grid" v-show="subjectGridVisible">
          <div class="form-row">
            <label>年级</label>
            <select v-model="selectedGrade" @change="loadSubjects">
              <option value="">请选择年级</option>
              <option v-for="grade in gradeOptions" :key="grade" :value="grade">{{ grade }}</option>
            </select>
          </div>
          <h4 class="subject-title">学科</h4>
          <div
            v-for="subject in subjectOptions"
            :key="subject"
            class="subject-item"
            :class="{ selected: selectedSubjects.includes(subject) }"
            @click="toggleSubject(subject)"
          >
            {{ subject }}
          </div>
        </div>
      </div>
      <div class="step-container" v-if="currentStep === 2">
        <h1>智能教学设计助手</h1>
        
        <!-- 使用提示 -->
        <div class="instruction-card" v-if="messages.length === 0">
          <h3>智能教学设计助手使用指南</h3>
          <p>请详细输入您的教学主题和具体需求，系统将在<strong>10分钟内</strong>为您生成包含以下内容的完整教学设计：</p>
          <ul>
            <li>教学目标：包含具体可衡量的认知目标、能力目标和情感目标</li>
            <li>教学重难点：明确指出本节课的关键知识点和学生易混淆的内容</li>
            <li>教学准备：详细列出所需教具、多媒体资源和预习材料</li>
            <li>完整教学过程（45分钟）：包含至少3个互动环节，每个环节有明确的时间分配和详细操作步骤</li>
            <li>课后作业设计：含基础题和拓展题，并给出参考答案</li>
            <li>教学评价方案：包含形成性评价和终结性评价方法</li>
          </ul>
          
          <div class="tips-section">
            <h4>获得更详细教案的小技巧：</h4>
            <div class="tip-list">
              <div class="tip-item">
                <span class="tip-icon">📝</span>
                <span>明确说明教学对象的特点（如班级人数、学生基础、特殊需求等）</span>
              </div>
              <div class="tip-item">
                <span class="tip-icon">🎯</span>
                <span>具体描述您希望达成的教学效果和学生能获得的能力</span>
              </div>
              <div class="tip-item">
                <span class="tip-icon">🧩</span>
                <span>提供您希望包含的特定教学方法或活动类型</span>
              </div>
              <div class="tip-item">
                <span class="tip-icon">📚</span>
                <span>说明您可使用的教学资源和设备条件</span>
              </div>
              <div class="tip-item">
                <span class="tip-icon">⏱️</span>
                <span>指出对各教学环节的时间分配要求</span>
              </div>
            </div>
          </div>
          
          <div class="tag-container">
            <div class="tag">互动环节一：小组讨论/合作学习</div>
            <div class="tag">互动环节二：游戏化教学</div>
            <div class="tag">互动环节三：实践/创新活动</div>
          </div>
          
          <div class="example-section">
            <h4>输入示例：</h4>
            <div class="example-box">
              "请为五年级数学'分数乘法'设计一节课。班级共35名学生，其中有5名学习能力较弱的学生需要额外关注。我希望设计一个'生活中的分数乘法'主题，通过实际情境帮助学生理解分数乘法的意义。教室有多媒体投影设备和白板，能够进行小组活动。希望互动环节一采用'Think-Pair-Share'模式，互动环节二使用卡片游戏，互动环节三设计购物情境的实践活动。课堂结束时，希望学生不仅能正确计算分数乘法，还能在生活中识别和应用分数乘法解决问题。"
            </div>
          </div>
          
          <p class="tip"><strong>记住：</strong>描述越详细，生成的教学设计越符合您的需求和教学实际</p>
        </div>
        
        <div class="ai-dialog">
          <div v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
            <p>{{ message.content }}</p>
          </div>
        </div>
        
        <!-- 生成中进度条 -->
        <div class="progress-container" v-if="isGenerating">
          <div class="progress-bar">
            <div class="progress-fill" :style="{width: progressPercent + '%'}"></div>
          </div>
          <div class="progress-text">正在生成教学设计 ({{ Math.round(progressPercent) }}%)，预计剩余时间：{{ remainingTime }}</div>
        </div>
        
        <div class="ai-input-section">
          <!-- 用户输入框 -->
          <textarea
            v-model="userInput"
            :placeholder="inputPlaceholder"
            class="user-input"
            @input="autoGrow($event)"
            :disabled="isGenerating"
          ></textarea>

          <div class="button-container">
            <!-- 发送需求按钮 -->
            <button class="ai-submit-btn" @click.prevent="sendMessage" :disabled="isGenerating || !userInput.trim()">
              {{ isGenerating ? '生成中...' : '开始生成教学设计' }}
            </button>
            
            <!-- 发送教案按钮 -->
            <button 
              class="ai-submit-btn send-btn" 
              @click.prevent="sendTeachingPlan" 
              v-if="messages.length > 1 && !isGenerating"
            >
              发送教案
            </button>
            
            <!-- 导出教案按钮 -->
            <button
              v-if="showExportBtn"
              class="ai-submit-btn export-btn"
              @click.prevent="exportTeachingPlan"
            >
              导出教案
            </button>
            
            <!-- 保存到系统按钮 -->
            <button
              v-if="showExportBtn"
              class="ai-submit-btn save-btn"
              @click.prevent="saveTeachingPlanToDatabase()"
            >
              保存到系统
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 全局确认按钮 -->
    <button class="confirm-btn" v-if="currentStep === 1 && selectedSubjects.length" @click="nextStep">下一步</button>
  </div>
</template>

<script>
import { generateAIResponse, saveTeachingPlan } from '@/api/aiService'; // 确保路径正确

export default {
  data() {
    return {
      currentStep: 1,
      educationLevel: '',
      gradeOptions: [],
      subjectOptions: [],
      selectedGrade: '',
      selectedSubjects: [],
      messages: [],// AI对话消息
      userInput: '',// 用户输入内容
      showExportBtn: false, // 控制导出按钮的显示
      isGenerating: false, // 控制生成状态
      progressPercent: 0, // 进度百分比
      progressInterval: null, // 进度条更新定时器
      startTime: null, // 开始生成时间
      resizeTimeout: null, // 用于防抖的定时器
    };
  },
  computed: {
    subjectGridVisible() {
      return this.educationLevel && this.gradeOptions.length > 0;
    },
    inputPlaceholder() {
      return this.messages.length === 0 
        ? "请详细描述：1)教学主题 2)学生情况 3)可用资源 4)期望的教学方法 5)希望达成的教学目标。例如：'设计五年级数学分数乘法课，班级35人，有投影设备，希望包含生活化例子、小组合作和手工操作环节，目标是让学生理解分数乘法概念并应用解决实际问题。'"
        : "请输入您的补充需求...";
    },
    remainingTime() {
      if (!this.startTime) return "计算中...";
      const elapsed = (Date.now() - this.startTime) / 1000; // 已经过的秒数
      const totalEstimated = elapsed / (this.progressPercent / 100); // 估计总秒数
      const remaining = Math.max(0, totalEstimated - elapsed); // 剩余秒数
      
      // 格式化为分:秒
      const minutes = Math.floor(remaining / 60);
      const seconds = Math.floor(remaining % 60);
      return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
    }
  },
  methods: {
    updateSubjects() {
      const subjects = {
        primary: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '初一', '初二', '初三'],
        middle: ['高一', '高二', '高三'],
      };
      this.gradeOptions = subjects[this.educationLevel] || [];
      this.selectedGrade = '';
      this.subjectOptions = [];
    },
    loadSubjects() {
      const subjectMap = {
        primary: {
          '一年级,二年级,三年级,四年级,五年级,六年级': ['语文', '数学', '英语', '道德与法治', '科学', '美术', '音乐', '体育'],
          '初一,初二,初三': ['语文', '数学', '英语', '政治', '历史', '化学', '物理', '生物', '地理', '美术', '音乐', '体育']
        },
        middle: {
          '高一,高二,高三': ['语文', '数学', '英语', '政治', '历史', '化学', '物理', '生物', '地理', '美术', '音乐', '体育', '心理健康']
        },
      };
      const subjects = subjectMap[this.educationLevel] || {};
      this.subjectOptions =
        Object.entries(subjects).find(([grades]) => grades.split(',').includes(this.selectedGrade))?.[1] || [];
    },
    toggleSubject(subject) {
      const index = this.selectedSubjects.indexOf(subject);
      if (index > -1) {
        this.selectedSubjects.splice(index, 1);
      } else {
        this.selectedSubjects.push(subject);
      }
    },
    nextStep() {
      this.currentStep++;
    },
    // 自动调整文本框高度
    autoGrow(event) {
      if (this.resizeTimeout) {
        clearTimeout(this.resizeTimeout);
      }
      
      this.resizeTimeout = setTimeout(() => {
        const textarea = event.target;
        textarea.style.height = 'auto';
        textarea.style.height = `${textarea.scrollHeight}px`;
      }, 100);
    },

    async sendMessage() {
      if (!this.userInput.trim() || this.isGenerating) return;

      // 添加用户输入到消息列表
      this.messages.push({ type: 'user-message', content: this.userInput });

      // 保存用户输入
      const userInput = this.userInput;
      this.userInput = '';
      
      // 开始生成进度条
      this.startGeneratingProgress();

      console.log({
        subject: this.selectedSubjects[0],
        grade: this.selectedGrade,
        topic: userInput,
      });

      try {
        // 调用后端接口
        const response = await generateAIResponse({
          subject: this.selectedSubjects[0], // 假设只选择了一个学科
          grade: this.selectedGrade,
          topic: userInput, // 用户输入作为 topic
        });

        console.log('AI Response:', response);

        // 处理响应内容，确保知识点换行显示
        let content = response.message || response;
        // 替换分号后面跟空格的内容为换行 (通常知识点使用分号分隔)
        content = content.replace(/；\s*/g, '；\n');
        content = content.replace(/;\s*/g, ';\n');

        // 添加 AI 回复到消息列表
        this.messages.push({ type: 'ai-message', content: content });
        
        // 显示导出按钮
        this.showExportButton();
      } catch (error) {
        console.error('AI生成失败:', error);

        // 如果接口调用失败，显示错误消息
        let errorMessage = 'AI生成失败，请稍后重试。';
        
        // 检查是否是认证错误
        if (error.message && error.message.includes('请先登录')) {
          errorMessage = '请先登录后再生成教学设计。您仍可以继续使用，但无法保存记录。';
          // 显示登录按钮或者提示
          this.$confirm('您尚未登录，是否立即前往登录页面？', '提示', {
            confirmButtonText: '去登录',
            cancelButtonText: '继续使用',
            type: 'warning'
          }).then(() => {
            // 用户点击了去登录
            this.$router.push('/login');
          }).catch(() => {
            // 用户取消，继续使用当前功能
          });
        } else if (error.response && error.response.status === 401) {
          errorMessage = '您的登录已过期，请重新登录。您仍可以继续使用，但无法保存记录。';
          // 清除可能过期的token
          localStorage.removeItem('token');
        }
        
        this.messages.push({ type: 'ai-message', content: errorMessage });
      } finally {
        // 停止进度条
        this.stopGeneratingProgress();
      }
    },
    
    // 开始生成进度条
    startGeneratingProgress() {
      this.isGenerating = true;
      this.progressPercent = 0;
      this.startTime = Date.now();
      
      // 清除可能存在的旧定时器
      if (this.progressInterval) {
        clearInterval(this.progressInterval);
      }
      
      // 设置定时器更新进度，模拟10分钟内完成
      const totalTime = 10 * 60 * 1000; // 10分钟
      const updateInterval = 1000; // 每秒更新一次
      const increasePerInterval = (100 * updateInterval) / totalTime;
      
      this.progressInterval = setInterval(() => {
        // 非线性增长，开始快，后面慢
        if (this.progressPercent < 30) {
          this.progressPercent += increasePerInterval * 1.5;
        } else if (this.progressPercent < 60) {
          this.progressPercent += increasePerInterval;
        } else if (this.progressPercent < 90) {
          this.progressPercent += increasePerInterval * 0.7;
        } else if (this.progressPercent < 99) {
          this.progressPercent += increasePerInterval * 0.3;
        }
        
        // 确保不超过100%
        if (this.progressPercent >= 100) {
          this.progressPercent = 99.9;
        }
      }, updateInterval);
    },
    
    // 停止进度条
    stopGeneratingProgress() {
      if (this.progressInterval) {
        clearInterval(this.progressInterval);
        this.progressInterval = null;
      }
      
      // 设置为100%并在短暂延迟后隐藏进度条
      this.progressPercent = 100;
      setTimeout(() => {
        this.isGenerating = false;
      }, 1000);
    },
    
    exportTeachingPlan() {
      // 导出教案逻辑
      const content = this.messages
        .map((msg) => `${msg.type === 'user-message' ? '用户需求' : '教学设计'}: \n${msg.content}`)
        .join('\n\n' + '='.repeat(50) + '\n\n');
        
      // 1. 保存到文件
      const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      
      // 使用更有意义的文件名
      const fileName = `${this.selectedGrade}${this.selectedSubjects[0]}教案_${new Date().toLocaleDateString().replace(/\//g, '-')}.txt`;
      link.download = fileName;
      link.click();
      
      // 2. 同时保存到数据库
      this.saveTeachingPlanToDatabase(content);
    },
    
    // 保存教学计划到数据库
    async saveTeachingPlanToDatabase(content) {
      try {
        // 获取最新的AI回复内容
        const aiResponse = this.messages.filter(msg => msg.type === 'ai-message').pop();
        if (!aiResponse) return;
        
        // 调用API保存到数据库
        const response = await saveTeachingPlan({
          subject: this.selectedSubjects[0],
          grade: this.selectedGrade,
          title: `${this.selectedGrade}${this.selectedSubjects[0]} - 教学设计`,
          content: aiResponse.content
        });
        
        this.$message({
          type: 'success',
          message: '教案已成功保存到系统!'
        });
        
        console.log('保存成功:', response);
      } catch (error) {
        console.error('保存教案失败:', error);
        
        // 检查是否是认证错误
        if (error.message && error.message.includes('请先登录')) {
          // 提示用户登录
          this.$confirm('您尚未登录，无法保存教案。是否前往登录页面？', '提示', {
            confirmButtonText: '去登录',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 用户点击了去登录
            this.$router.push('/login');
          }).catch(() => {
            // 用户取消
          });
        } else if (error.response && error.response.status === 401) {
          // 登录已过期
          this.$message({
            type: 'error',
            message: '登录已过期，请重新登录后再保存'
          });
          // 清除可能过期的token
          localStorage.removeItem('token');
        } else {
          // 其他错误
          this.$message({
            type: 'error',
            message: '保存教案失败，请稍后重试'
          });
        }
      }
    },
    
    // 在 AI 回复后显示导出按钮
    showExportButton() {
      this.showExportBtn = true;
    },

    goBack() {
      this.$router.go(-1); // 返回上一页
    },

    // 发送教案给同事或学校
    sendTeachingPlan() {
      if (this.messages.length < 2) return;
      
      // 获取最新的AI回复内容
      const aiResponse = this.messages.filter(msg => msg.type === 'ai-message').pop();
      if (!aiResponse) return;
      
      // 弹出确认对话框
      this.$confirm('确定要发送该教案到您的邮箱吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        // 这里模拟发送教案
        this.$message({
          type: 'success',
          message: '教案已成功发送!'
        });
      }).catch(() => {
        // 取消操作
        this.$message({
          type: 'info',
          message: '已取消发送'
        });
      });
    },
  },
};
</script>

<style scoped>
:root {
    --primary-blue: #1a73e8;
    --hover-blue: #1557b0;
    --bg-gray: #f8f9fa;
    --border-color: #e0e0e0;
    margin-top: 60px; /* 导航栏高度 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', system-ui;
}

body {
    background: var(--bg-gray);
    min-height: 100vh;
}

.container {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* 右侧内容容器 */
.right-panel {
    position: relative;
    min-height: calc(100vh - 60px);
    overflow: visible;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 0;
}

/* 步骤容器 */
.step-container {
    position: relative;
    width: 100%;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 1; /* 确保内容可见 */
    transform: none; /* 确保内容未被移出视图 */
    margin-top: 0;
}

.step-container.active {
    opacity: 1;
    height: auto;
    overflow: visible;
    transform: none;
}

/* 使用指南卡片 */
.instruction-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #409eff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.instruction-card h3 {
    color: #409eff;
    margin-bottom: 12px;
    font-size: 18px;
}

.instruction-card h4 {
    color: #606266;
    margin: 16px 0 8px 0;
    font-size: 16px;
}

.instruction-card ul {
    padding-left: 20px;
    margin: 12px 0;
}

.instruction-card li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* 提示部分样式 */
.tips-section {
    background: #fafafa;
    padding: 15px;
    border-radius: 6px;
    margin: 15px 0;
    border: 1px dashed #dcdfe6;
}

.tip-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tip-icon {
    font-size: 18px;
    min-width: 24px;
}

/* 示例部分样式 */
.example-section {
    margin-top: 15px;
}

.example-box {
    background: #edf8ff;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
    border: 1px solid #d9ecff;
    color: #2c3e50;
}

.instruction-card .tip {
    font-style: italic;
    color: #606266;
    margin-top: 12px;
    font-size: 14px;
    background: #f2f6fc;
    padding: 8px;
    border-radius: 4px;
}

/* 进度条 */
.progress-container {
    margin: 20px 0;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.progress-bar {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    transition: width 0.5s ease;
    border-radius: 3px;
}

.progress-text {
    margin-top: 8px;
    font-size: 14px;
    color: #606266;
    text-align: center;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

select {
    width: 100%;
    max-width: 200px;
    padding: 8px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin-top: 8px;
    appearance: none;
    background: #ffffff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 0.5rem center/1em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}

/* 年级选择板块样式 */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px 0;
    padding: 15px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 学科板块样式 */
.subject-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 20px;
    padding: 15px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 学科标题样式 */
.subject-title {
    grid-column: 1 / -1;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* 学科选项样式 */
.subject-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    height: 40px;
}


/* 悬停效果 */
.subject-item:hover {
    background-color: #e8f0fe;
    border-color: #007bff;
}

/* 选中状态 */
.subject-item.selected {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    margin-top: 8px;
    appearance: none;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    min-height: 150px;
    resize: vertical;
}

textarea:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
}

/* 确认按钮 */
.confirm-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #1a73e8;
    color: white;
    padding: 15px 40px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transform: translateY(0);
    z-index: 1000;
    border: none;
}

.confirm-btn.visible {
    transform: translateY(0);
    opacity: 1;
}

/* AI对话界面增强 */
.ai-input-section {
    position: relative;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

/* AI对话界面 */
.ai-dialog {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.message {
    margin: 15px 0;
    padding: 12px;
    border-radius: 8px;
    max-width: 80%;
}

.message p {
    white-space: pre-line;
    margin: 0;
    line-height: 1.5;
}

.user-message {
    background: #e8f0fe;
    margin-left: auto;
}

.ai-message {
    background: #f0f0f0;
}

/* AI输入区域按钮 */
.ai-submit-btn {
    background: #1a73e8;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    margin-top: 10px;
    transition: all 0.3s;
    font-weight: bold;
    display: inline-block;
}

.ai-submit-btn:hover:not(:disabled) {
    background: #1557b0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ai-submit-btn:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

/* 返回按钮 */
.back-btn {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #606266;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.back-btn:hover {
    background: #e0e0e0;
    color: #303133;
}

.back-btn i {
    margin-right: 5px;
}

/* 发送按钮 */
.send-btn {
    background: #67c23a;
    margin-left: 10px;
}

.send-btn:hover:not(:disabled) {
    background: #5daf34;
}

.export-btn {
    background: #4CAF50;
    margin-left: 10px;
}

.export-btn:hover:not(:disabled) {
    background: #3d8b40;
}

.save-btn {
    background: #409eff;
    margin-left: 10px;
}

.save-btn:hover:not(:disabled) {
    background: #3a8ee6;
}

@media (max-width: 1200px) {
    .model-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }

    .model-grid {
        grid-template-columns: 1fr;
    }
}

/* 标签容器样式 */
.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

.tag {
    background: #ecf5ff;
    color: #409eff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid #d9ecff;
}

.button-container {
    display: flex;
    margin-top: 10px;
}
</style>